<template>
	<NavBar :obj="{ title: '个人资料', color: '#000', backgroundColor: '#fff' }" />
	<view class="container">
		<view class="main">
			<view class="main_li">
				头像
				<!-- #ifdef MP-WEIXIN -->
				<view>
					<button
						class="tx"
						:plain="true"
						open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar"
						:style="{ 'background-image': 'url(' + `${imgUrl + infoRef.photo}` }"
					></button>
					<u-icon name="arrow-right" color="#888" size="16"></u-icon>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view>
					<view
						class="tx"
						@click="uploadPhoto"
						:style="{ 'background-image': 'url(' + `${infoRef.photo !== '' ? imgUrl + infoRef.photo : '/static/profile/default.png'}` + ')' }"
					></view>
					<u-icon name="arrow-right" color="#888" size="16"></u-icon>
				</view>
				<!-- #endif -->
			</view>
		</view>

		<view class="main">
			<view class="main_li" @click="goUrl(`/pages/user/set/setting-detail?type=nickname&title=用户昵称`)">
				昵称
				<view>
					<view>{{ infoRef.nickname }}</view>
					<u-icon name="arrow-right" color="#888" size="16"></u-icon>
				</view>
			</view>
			<view class="main_li">
				ID
				<view>
					<view>{{ infoRef.code }}</view>
				</view>
			</view>
			<block v-if="infoRef.mobile == ''">
				<view class="main_li" @click="goUrl(`/pages/user/set/setting-detail?type=mobile&title=手机号码`)">
					手机号码
					<view>
						<view>绑定手机号</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="main_li">
					手机号码
					<view>
						<view>{{ infoRef.mobile }}</view>
					</view>
				</view>
			</block>
		</view>

		<view class="main" v-if="infoRef.parent">
			<view class="main_li">
				我的推荐人
				<view class="flex flex-col items-end justify-end">
					<view class="flex items-center">
						<image :src="imgUrl + infoRef.photo" style="width: 38rpx; height: 38rpx; border-radius: 50%"></image>
						<view style="font-size: 26rpx; color: #333333; margin-left: 10rpx">{{ infoRef.parent.nickname }}</view>
					</view>
					<view style="font-size: 22rpx; color: #888888">ID：{{ infoRef.parent.code }}</view>
				</view>
			</view>
		</view>
		<view class="main" v-else>
			<view class="main_li" @click="popupRef = true">
				我的推荐人
				<view class="flex flex-col items-end justify-end">完善推荐人</view>
			</view>
		</view>
	</view>
	<u-popup closeable :show="popupRef" @close="popupRef = false">
		<view class="popup-c">
			<view class="cell flex items-center justify-between parent_inp">
				<view class="t">邀请人</view>
				<input type="text" placeholder="请填写邀请人编号" class="inp" v-model="parent_code" />
			</view>
			<view class="theme-btn-parent" @click="saveParent">确定</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, reactive, inject, computed, onMounted } from 'vue';
	import { port, imgUrl, goUrl, hint, uploadImg, uploadImgs } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const popupRef = ref(false);
	const parent_code = ref('');
	const topH = ref('20');
	const infoRef = ref('');
	const waitParentCode = ref('');
	onShow(() => {
		getUserInfo();
		waitParentCode.value = uni.getStorageSync('waitParentCode');
	});
	const formData = {
		photo: ''
	};
	async function onChooseAvatar(e) {
		let res = await uploadImgs(e.detail.avatarUrl);
		saveUserPhoto(res);
	}
	function saveUserPhoto(url) {
		infoRef.value.photo = url;
		formData.photo = url;
		setTimeout(() => {
			saveUser();
		}, 500);
	}
	async function uploadPhoto() {
		let res = await uploadImg();
		saveUserPhoto(res);
	}
	async function getUserInfo() {
		let res = await port('getUserInfo');
		infoRef.value = res.data;
	}
	async function saveUser() {
		let res = await port('saveUser', formData);
		hint(res.msg);
	}
	async function saveParent() {
		const res = await port('saveUser', { parent_code: parent_code.value });
		hint(res.msg);
		getUserInfo();
		popupRef.value = false;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	button[plain] {
		background-color: none !important;
		border: none !important;
	}
	.container {
		margin: 0 30upx;
		.main {
			background: #fff;
			border-radius: 20upx;
			margin-top: 30upx;

			.main_li {
				height: 100upx;
				color: #000;
				font-size: 28upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tx {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					background-size: 100% 100%;
					margin-right: 10upx;
				}
				view {
					color: #888;
					display: flex;
				}
			}
		}

		.logout {
			margin-top: 100upx;
			color: #aaa;
			background: #fff;
			text-align: center;
			line-height: 100upx;
			border-radius: 20upx;
		}
	}
	
	.cell {
		padding: 30rpx;
		.t {
			font-size: 28rpx;
			font-weight: 500;
			color: #231e1f;
			flex: 1;
		}
		.inp {
			font-size: 28rpx;
			color: #999999;
			text-align: right;
		}
		.arrow-icon {
			margin-left: 12rpx;
			width: 13rpx;
		}
	}
	.parent_inp {
		margin-top: 60rpx;
	}
	.theme-btn-parent {
		background: $theme-bg-btn-color;
		border-radius: 14rpx;
		text-align: center;
		padding: 20rpx 0;
		margin: 20rpx 30rpx 0;
		color: #fff;
		font-size: 28rpx;
	}
	.popup-c {
		padding: 20rpx 30rpx;
	}
</style>
